<template>
  <div id="patrolTheRiver">
    <div id="main"></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "patrolTheRiver",
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getData();
    var that = this;
    window.onresize = function () {
      that.getReport();
    };
    setInterval(that.getData, 5000);
  },
  methods: {
    getData() {
      var that = this;
      axios.get("index.php?g=api&m=index&a=rivers").then(function (res) {
        var data = res.data.content;
        for (var i = 0; i < data.report.length; i++) {
          that.data[i] = [];
          that.data[i].push(data.report[i].time);
          that.data[i].push(Number(data.report[i].num));
        }
        for (var i = 0; i < data.work.length; i++) {
          that.data[i].push(Number(data.work[i].num));
        }
        that.data.unshift(["类型", "志愿者上报", "河长上报"]);
        console.log(that.data, 11111000000);
        that.getReport();
      });
    },
    getReport() {
      var data = this.data;
      var myChart = this.$echarts.init(document.getElementById("main"));
      //console.log(1111,myChart)
      var option = null;
      option = {
        legend: {
          orient: "vertical",
          icon: "circle",
          top:"5%",
          right: "5%",
          textStyle: {
            fontSize: "0.1rem", //字体大小
            color: "#FFF", //字体颜色
          },
        },
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          icon: "circle",
          textStyle: {
            // 提示框内容的样式
            color: "#FFF",
            fontSize: 10,
          },
        },
        dataset: {
          source: data,
        },
        grid: {
          bottom: "10%",
          right:"5%",
          left:"10%",
          top: "30%",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            margin: 10, // 刻度标签与轴线之间的距离
            textStyle: {
              color: "#ffffff",
              fontSize: 12,
            },
          },
          axisLine: {
            // 坐标轴 轴线
            show: true,
            // ------   线 ---------
            lineStyle: {
              color: "#063A80",
              width: 3,
              type: "solid",
            },
          },
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: 12,
            },
            margin: 10, // 刻度标签与轴线之间的距离
          },
          axisLine: {
            // 坐标轴 轴线

            // ------   线 ---------
            lineStyle: {
              color: "#063A80",
              width: 3,
              type: "solid",
            },
          },
          splitLine: {
            // gird 区域中的分割线
            show: true, // 是否显示
            lineStyle: {
              color: "#063A80",
              width: 3,
              type: "solid",
            },
          },
          // splitArea: {     // 网格区域
          //   show: true   // 是否显示，默认为false
          // }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar", color: "#00AEEF" },
          { type: "bar", color: "#FEC44C" },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }

      //console.log("执行力",option)
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#patrolTheRiver {
  width: 24.2vw;
  height: 27.8vh;
  background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/river.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 1vh 0;
}
#patrolTheRiver #main {
  width: 100%;
  height: 100%;
}
</style>